<template>
	<uv-notice-bar text="分享功能还在努力开发中"></uv-notice-bar>
	<view class="content pb-180">
		<view class="activity-content mt-30">
			<!-- 基础信息，包含头像以及姓名学校等 -->
			<view class="flex-space">
				<view class="flex">
					<view class="user-icon">
						<image :src="articleData.user_img" mode="aspectFill" class="img"></image>
					</view>
					<view class="infon-box ml-10">
						<view class="user-name">{{articleData.user_name}}</view>
						<view class="tips-text mt-10"></view>
					</view>
				</view>
			</view>

			<!-- 活动标题 -->
			<view class="blod-text mt-10">{{articleData.title}}</view>
			<!-- 活动图片等 -->
			<uv-swiper :list="articleData.img_list" indicator indicatorMode="line" :autoplay="false"
				imgMode="aspectFit"></uv-swiper>
			<!-- 活动内容 -->
			<view class="content-text mt-10">
				{{articleData.content}}
			</view>
			<!-- 帖子时间 -->
			<view class="flex-space mt-30">
				<view class="time-text a-center">{{articleData.time}}</view>
				<view class="flex" @click="report_show = true">
					<view class="time-text a-center mr-10">举报</view>
					<uv-icon name="warning" size="22"></uv-icon>
				</view>
			</view>
		</view>
		<!-- 帖子其他功能 -->
		<view class="flex-space ml-60 mr-60 mt-30">
			<view>
				<view class="j-center" @click="isLike">
					<uv-icon size="40" name="thumb-up" color="primary" v-if="!articleData.is_like"></uv-icon>
					<uv-icon size="40" name="thumb-up-fill" color="primary" v-if="articleData.is_like"></uv-icon>
				</view>
				<view class="j-center tips-text">{{articleData.number_likes}}</view>
			</view>
			<view>
				<view class="j-center" @click="updateCollection">
					<uv-icon size="40" name="star" color="rgb(254, 180, 50)"
						v-if="!articleData.is_collection"></uv-icon>
					<uv-icon size="40" name="star-fill" color="rgb(254, 180, 50)"
						v-if="articleData.is_collection"></uv-icon>
				</view>
				<view class="j-center tips-text">{{articleData.number_collection}}</view>
			</view>
			<view>
				<view class="j-center">
					<uv-icon size="40" name="share-square" color="rgb(107, 140, 252)"></uv-icon>
				</view>
				<view class="j-center tips-text">分享</view>
			</view>
		</view>
		<uv-divider text="评论区"></uv-divider>
		<!-- 评论区 -->
		<view class="mt-50">
			<view v-for="(item, index) in commentData" :key="index">
				<view class="flex mt-30">
					<view class="user-icon">
						<image :src="item.user_img" mode="aspectFill" class="img"></image>
					</view>
					<view class="infon-box ml-10">
						<view class="user-name">{{item.user_name}}</view>
						<view class="tips-text mt-10">第{{index+1}}楼</view>
					</view>
				</view>
				<view class="comment-box">
					<uv-text :text="item.comment"></uv-text>
				</view>
				<view class="time-text flex-end mt-10">{{item.time}}</view>
				<uv-divider></uv-divider>
			</view>
		</view>
		<view class="j-center tips-text mt-50" v-if="is_comment_empty">暂时还没有评论呢，快来抢个沙发吧~</view>
		<view class="j-center tips-text mt-50" v-if="!is_comment_empty">请文明用语，营造美好氛围~</view>
	</view>
	<!-- 写评论 -->
	<view class="flex d-box">
		<view class="input-box">
			<uv-textarea v-model="value" :maxlength="-1" autoHeight placeholder="发信息···"></uv-textarea>
		</view>
		<view class="ml-30">
			<uv-button type="success" text="发送" @click="sendMessage(receiveData.article_id)"></uv-button>
		</view>
	</view>
	<uv-toast ref="toast"></uv-toast>
	<!-- 举报内容 -->
	<uv-overlay :show="report_show" @click="report_show = false">
		<view class="warp">
			<view class="rect" @tap.stop>
				<view class="j-center">举报文章</view>
				<view class="mt-30"></view>
				<uv-divider></uv-divider>
				<view class="mt-30"></view>
				<uv-textarea v-model="report_value" maxlength="200" placeholder="举报描述(非必要不举报)"></uv-textarea>
				<view class="mt-30">
					<uv-button text="提交" count type="primary" @click="report"></uv-button>
				</view>
			</view>
		</view>
	</uv-overlay>
</template>

<script>
	import {
		filterSensitiveWords,
		formatDateTime
	} from '../../../utils/utils';
	export default {
		data() {
			return {
				inputValue: '',
				receiveData: {}, // 接受数据，存在文章id
				commentData: [],
				user_info: {}, // 用户信息
				is_comment_empty: false,
				value: '', // 聊天信息
				articleData: {}, // 文章数据
				comment_num: 0,
				report_show: false, // 举报弹窗
				report_value: '', // 举报内容
			}
		},
		methods: {
			filterSensitiveWords,
			formatDateTime,
			handleInput(e) {
				this.inputValue = e.target.value;
			},
			// 文章评论数量更新
			async updateNum(postId, update_num) {
				const db = uniCloud.database();
				const collection = db.collection('articles')
				const res = await collection.where({
					_id: postId
				}).update({
					number_comments: update_num
				})
			},
			// 举报功能
			async report() {
				const db = uniCloud.database();
				const res = await db.collection('report').add({
					user_name: this.user_info.user_name,
					user_img: this.user_info.user_img,
					article_id: this.articleData._id,
					content: this.report_value,
					time: +Date.now()
				})
				this.report_value = ''
				this.report_show = false
				this.$refs.toast.show({
					type: 'success',
					message: "点赞成功"
				})
			},
			// 更新用户收藏列表以及文章收藏数量
			async updateCollection() {
				// 取消收藏
				if (this.articleData.is_collection) {
					const index = this.user_info.collection_list.indexOf(this.articleData._id)
					this.user_info.collection_list.splice(index, 1)
					this.articleData.is_collection = false
					// 更新列表
					const db = uniCloud.database();
					const collection = db.collection('user_info')
					const res = await collection.doc(this.user_info._id).update({
						collection_list: this.user_info.collection_list
					})
					this.articleData.number_collection = this.articleData.number_collection - 1
					// 更新文章收藏数量列表
					const collection_a = db.collection('articles')
					const response = await collection_a.doc(this.articleData._id).update({
						number_collection: this.articleData.number_collection
					})
					this.$refs.toast.show({
						type: 'warning',
						message: "取消收藏成功"
					})
					uni.setStorageSync('user_info', this.user_info)
				} else {
					// 收藏成功
					this.user_info.collection_list.push(this.articleData._id)
					this.articleData.is_collection = true
					// 更新列表
					const db = uniCloud.database();
					const collection = db.collection('user_info')
					const res = await collection.doc(this.user_info._id).update({
						collection_list: this.user_info.collection_list
					})
					this.articleData.number_collection = this.articleData.number_collection + 1
					// 更新文章收藏数量列表
					const collection_a = db.collection('articles')
					const response = await collection_a.doc(this.articleData._id).update({
						number_collection: this.articleData.number_collection
					})
					this.$refs.toast.show({
						type: 'success',
						message: "收藏成功"
					})
					uni.setStorageSync('user_info', this.user_info)
				}
			},
			// 判断是否已点赞、已收藏
			judgmentData() {
				const list = this.articleData
				list.is_like = false
				for (let i = 0; i < list.user_likes_list.length; i++) {
					if (list.user_likes_list[i] === this.user_info._id) {
						list.is_like = true
						break
					} else {
						list.is_like = false
					}
				}
				this.articleData = list
				// 先判断是否已经收藏
				this.articleData.is_collection = false
				for (let i = 0; i < this.user_info.collection_list.length; i++) {
					if (this.user_info.collection_list[i] === this.articleData._id) {
						this.articleData.is_collection = true
					} else {
						this.articleData.is_collection = false
					}
				}
				console.log('文章数据', this.articleData)
			},
			// 点赞数变更
			async update_likes_num(num_likes, bool) {
				const data = this.articleData
				// 判断是点赞还是取消点赞
				if (bool) {
					data.user_likes_list.push(this.user_info._id)
				} else {
					console.log('id', this.user_info._id)
					const index = data.user_likes_list.indexOf(this.user_info._id)
					data.user_likes_list.splice(index, 1)
				}
				this.articleData = data
				console.log('文章数据', this.articleData)
				const db = uniCloud.database();
				const collection = db.collection('articles')
				const res = await collection.where({
					_id: this.articleData._id
				}).update({
					number_likes: num_likes,
					user_likes_list: this.articleData.user_likes_list
				})
			},
			// 点赞
			isLike() {
				if (this.articleData.is_like) {
					this.articleData.number_likes = this.articleData.number_likes - 1
					this.update_likes_num(this.articleData.number_likes, false)
					this.$refs.toast.show({
						type: 'warning',
						message: "取消点赞成功"
					})
				} else {
					this.articleData.number_likes = this.articleData.number_likes + 1
					this.update_likes_num(this.articleData.number_likes, true)
					this.$refs.toast.show({
						type: 'success',
						message: "点赞成功"
					})
				}
				this.articleData.is_like = !this.articleData.is_like
			},
			// 发送信息
			async sendMessage(postId) {
				let time = formatDateTime(Date.now())
				const message = filterSensitiveWords(this.value)
				if (message) {
					this.$refs.toast.show({
						type: 'error',
						message: `评论含有敏感词,不能发布`
					})
					return
				}
				// 后期加入评论审核机制
				if (this.value) {
					try {
						const db = uniCloud.database();
						const collection = db.collection('comments')
						const res = await collection.add({
							article_id: postId,
							user_id: this.user_info._id,
							comment: this.value,
							user_name: this.user_info.user_name,
							user_img: this.user_info.user_img,
							createTime: Date.now()
						})
						this.comment_num += 1
						this.updateNum(postId, this.comment_num)
					} catch (err) {
						console.error(err)
						return
					}
					this.commentData.push({
						user_name: this.user_info.user_name,
						school: '五邑大学',
						comment: this.value,
						time: time,
						user_img: this.user_info.user_img
					})
					this.$refs.notify.show();
					this.value = ''
				} else {
					this.$refs.warning.show();
				}

			},
			// 获取评论
			async getComments(postId) {
				const db = uniCloud.database();
				const collection = db.collection('comments')
				const res = await collection.where({
					article_id: postId
				}).get()
				this.commentData = res.result.data.map(item => ({
					...item,
					time: formatDateTime(+item.createTime)
				}))
			},
			// 根据id查询文章内容
			async getArticles() {
				const db = uniCloud.database();
				const collection = db.collection('articles')
				const res = await collection.doc(this.receiveData.article_id).get()
				this.articleData = res.result.data[0]
				this.articleData.time = formatDateTime(this.articleData.createTime)
				this.comment_num = +this.articleData.number_comments
			},
		},

		async onLoad(options) {
			if (options.data) {
				try {
					// 解码数据
					this.receiveData = JSON.parse(decodeURIComponent(options.data))
				} catch (error) {
					console.log('数据解析失败', error)
				}
			}
			const user_info = uni.getStorageSync('user_info')
			this.user_info = user_info
			await this.getArticles()
			await this.getComments(this.receiveData.article_id)
			this.judgmentData()
		}
	}
</script>

<style scoped>
	.content {
		margin: 30rpx;
	}

	.user-icon {
		width: 80rpx;
		height: 80rpx;
		border-radius: 100%;
		background-color: skyblue;
	}

	.user-name {
		font-size: 26rpx;
	}

	.content-text {
		font-size: 28rpx;
		font-weight: 400;
	}

	.label-text {
		font-size: 28rpx;
		font-weight: 400;
		color: #666;
	}

	.icon-b {
		width: 28rpx;
		height: 28rpx;
	}

	.more-box {
		padding: 30rpx;
		background-color: #ebebeb;
	}

	.comment-box {
		margin: 20rpx 0 0 80rpx;
	}

	.input-box {
		width: 75%;
	}

	.d-box {
		width: 100%;
		position: fixed;
		bottom: 0;
		padding: 30rpx 30rpx 50rpx 30rpx;
		background-color: #fff;
	}

	.pb-180 {
		padding-bottom: 180rpx;
	}

	.warp {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
	}

	.rect {
		padding: 30rpx;
		width: 450rpx;
		border-radius: 20rpx;
		background-color: #fff;
	}
</style>